<template>
    <div class="detailbox" :style="{height:this.$store.state.gao+'px'}" ref="box">
        <div class="xscontent" v-show="!zy">
            <div class="xszhuti" ref="zhuti">
                <div class="zttop">{{nowgao==0?this.$store.state.book.booktitle:xszw[0]}}</div>
                <div class="ztcenter last"
                    :style="{transform: `translateX(${yidong_last+'px'})`,
                        transition: yiwanle_last == true?'null':'all 0.5s linear'}" 
                        @transitionend="yw"
                        @transitionstart='shangyizhang'
                        >
                    <ul class="xxs"  
                    :style="{transform: `translateY(${-((this.num) *this.$store.state.gao * 0.85)+'px'})`}" 
                    ref="lastxsnr">
                        <li>
                            <p v-for="(item,index) in changearr_last" :key="index" :class="{'biaoti':index==0}">{{item}}</p>
                        </li>
                    </ul>
                </div>
                <div class="ztcenter now">
                    <ul class="xxs" :style="{transform: `translateY(${-nowgao+'px'})`}" ref="xsnr">
                        <li>
                            <p v-for="(item,index) in xszw" :key="index" :class="{'biaoti':index==0}">{{item}}</p>
                        </li>
                    </ul>
                </div>
                <div class="ztcenter next"  
                :style="{transform: `translateX(${-yidong_next+'px'})`,
                        transition: yiwanle_next == true?'null':'all 0.5s linear'}" 
                        @transitionend="yw"
                        @transitionstart='xiayizhang'
                        >
                    <ul class="xxs" 
                    :style="{transform: `translateY(${-((this.num) *this.$store.state.gao * 0.85)+'px'})`}">
                        <li>
                            <p v-for="(item,index) in changearr_next" :key="index" :class="{'biaoti':index==0}">{{item}}</p>
                        </li>
                    </ul>
                </div>
                <div class="ztdown">{{xzsj}}</div>
            </div>
            <div class="zzc" 
                @touchstart='ks' 
                @touchmove='yd' 
                @touchend='js' 
                >
                <div class="zzctop">
                    <div class="shangleft" @click="shang"></div>
                    <div class="shangright" @click="xia"></div>
                </div>
                <div class="zzczhong">
                    <div class="centerleft" @click="shang"></div>
                    <div class="centercenter" @click="mul"></div>
                    <div class="centerright" @click="xia"></div>
                </div>
                <div class="zzcdown">
                    <div class="xialeft" @click="shang"></div>
                    <div class="xiaright" @click="xia"></div>
                </div>
                <div class="mlboxtop">
                    <div class="mlbox" v-show="xianshimul" @click="mulxiaoshi">
                        <mytop></mytop>
                        <div class="mldown">
                            <div class="dangqian">
                                {{xszw[0]}}
                            </div>
                            <div class="changetop">
                                <div class="changeleft" @click="lastzhang">‹</div>
                                <div class="changecenter" ref="gundongtiao" @touchstart="dianji">
                                    <div class="changechang"
                                    :style="{width:xzchang+'px'}" 
                                    ></div>
                                </div>
                                <div class="changeright" @click="nextzhang">›</div>
                            </div>
                            <div class="changedown">
                                <div class="smallchange" @click="ml">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shuji"></use>
                                    </svg>
                                    目录
                                </div>
                                <div class="smallchange" @click="sz">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shezhi"></use>
                                    </svg>
                                    更多
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bigml" v-if="mml" @click="guandiao">
                        <div class="left">
                            <zhangjie></zhangjie>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="xszz" @click="xiaoshi" v-show="zy">
            <canvas ref="hb"></canvas>
            <div class="dinweide">
                <div class="dwt">
                    <div class="dwtop">
                        <div class="topleft"></div>
                        <div class="topright"></div>
                    </div>
                    <div class="dwzhong">
                        <div class="zhongleft">上一页</div>
                        <div class="zhongcenter">工具栏</div>
                        <div class="zhongright">下一页</div>
                    </div>
                    <div class="dwdown">
                        <div class="downleft">也可以左右滑动哦~</div>
                        <div class="downright">(๑╹◡╹)ﾉ"""</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import zhangjie from "./zhangjie.vue"
import mytop from "../small/mytop"
export default {
    name:"bookdetail",
    components:{
        mytop,
        zhangjie
    },
    data(){
        return {
            zy:true,
            tim:null,
            zjnr:'',
            xszw:[],
            yidong_next:0,
            yiwanle_next:false,
            changearr_next:[],
            yidong_last:0,
            yiwanle_last:false,
            changearr_last:[],
            nowgao:0,
            num:0,
            gai:0,
            tim:null,

            szmove:false,
            start:0,
            moving:0,

            xzsj:'',
            timer:null,

            xianshimul:false,

            xzchang:0,
            bfb:0,
            kuan:0,
            tmm:null,

            mml:false,
            aaaaa:null
        }
    },
    watch:{
        '$store.state.bookdetail.nowzj'(){
            // console.log(this.$store.state.bookdetail.nowzj)
            if(this.$store.state.bookdetail.nld){
                this.$store.commit("bookdetail/changebooknld",false)
                this.zhiding()
            }
        }
    },
    mounted(){
        let zhiy = sessionStorage.getItem("zhiyin")
        // console.log(this.bfb,this.$refs.xsnr.scrollHeight,this.$refs.zhuti.clientHeight)
        this.$store.commit('changenavshow', false)
        document.oncontextmenu = ()=> {return false}
        this.getdata()
        this.gbsj()
        this.gbzj()
        if(zhiy){
         this.zy = false
        }else{
         this.huahua()
         this.zidong()
        }
    },
    methods:{
        // 初始改变章节和页数
        gbzj(){
            if(this.$store.state.bookdetail.nowzj !== 0){
                if(this.$store.state.bookdetail.nowys !== 0){
                    this.num = this.$store.state.bookdetail.nowys
                    this.nowgao = this.num * this.$store.state.gao * 0.85
                    this.tmm = setTimeout(()=>{
                        let ye = Math.ceil(this.$refs.xsnr.scrollHeight/this.$refs.zhuti.clientHeight)
                        this.bfb = this.kuan / ye
                        this.xzchang = this.num * this.bfb
                        clearTimeout(this.tmm)
                        this.tmm = null
                    },100)
                }
            }
        },
        // 处理小说内容
        chuli(value,num,where){
            let arr = value.split('<p>')
            arr.pop()
            arr.shift()
            let newarr = []
            for (let i = 0; i < arr.length; i++) {
                newarr.push(arr[i].slice(0,-5))
            }
            let zz = /\<span\>(.*)\<\/span\>/
            let abc = zz.exec(value)[1]
            newarr.unshift(abc)
            // 判断是不是第一次获取数据
            if(num == 0){
                this.xszw = newarr
                this.changearr_next = newarr
                this.changearr_last = newarr
            }else{
                // 判断是即将上一章还是下一章
                if(where == 0){
                    // 上一章的话
                    this.changearr_last =newarr
                }else{
                    // 下一章的话
                    this.changearr_next = newarr
                }
            }
        },
        // 最开始的获取数据
        getdata(){
            axios.get(`https://apis.netstart.cn/yunyuedu/reader/book/info.json?source_uuid=${this.$store.state.book.bookid}`).then(
                res=>{
                    this.$store.dispatch("bookdetail/setbookallzj", res.data.data.catalog);
                    if(this.$store.state.bookdetail.nowzj !== 0){
                        this.$store.dispatch("bookdetail/setbooknowzj", this.$store.state.bookdetail.nowzj);
                        this.jindu(this.$store.state.bookdetail.nowzj)
                    }else{
                        this.$store.dispatch("bookdetail/setbooknowzj", 0);
                        this.jindu(0)
                    }
                    this.getnr(0)
                    if(this.$store.state.bookdetail.nowzj !== 0){
                        this.getnr(1)
                    }
                },
                err=>{
                    console.log(err)
                }
            )
        },
        // 获取对应章节的内容
        getnr(num){
            let abc = ''
            if(num == 0){
                // 最开始获取数据
                abc = this.$store.state.bookdetail.allzj[this.$store.state.bookdetail.nowzj].secId
            }else if(num == 1){
                // 获取上一章的数据
                abc = this.$store.state.bookdetail.allzj[this.$store.state.bookdetail.nowzj-1].secId
            }else{
                // 获取下一章的数据
                abc = this.$store.state.bookdetail.allzj[this.$store.state.bookdetail.nowzj+1].secId
            }
            axios.get(`https://apis.netstart.cn/yunyuedu/reader/book/content.json?source_uuid=${this.$store.state.book.bookid}&content_uuid=${abc}`).then(
                res=>{
                    // console.log(res,this.$store.state.bookdetail.nowzj)
                    this.zjnr = res.data.data.content
                    if(num == 1){
                        // 处理上一章的文字
                        // console.log("上一章的内容")
                        this.chuli(this.zjnr,1,0)
                    }else if(num == 2){
                        // 处理下一章的文字
                        this.chuli(this.zjnr,1,1)
                    }else{
                        // 处理当前的文字
                        this.chuli(this.zjnr,0)
                    }
                    this.$store.dispatch("bookdetail/setbooknownr",this.xszw);
                },
                err=>{
                    console.log(err)
                }
            )
        },
        // 画指引用的线
        huahua(){
            let canvas = this.$refs.hb
            let width1 = document.documentElement.clientWidth || documentbody.clientWidth;
            let gao1 = this.$store.state.gao
            canvas.height = gao1
            canvas.width =  width1;
            let hua = canvas.getContext("2d");
            hua.beginPath();
            hua.moveTo( width1/4, (gao1/5) );
            hua.lineTo( width1/4, gao1 );
            hua.strokeStyle = "white";
            hua.lineWidth = 2;
            hua.stroke();

            hua.beginPath();
            hua.moveTo( (width1/4)*3, 0 );
            hua.lineTo( (width1/4)*3, (gao1/5)*4 );
            hua.strokeStyle = "white";
            hua.lineWidth = 2;
            hua.stroke();

            hua.beginPath();
            hua.moveTo( (width1/4), gao1/5 );
            hua.lineTo( (width1/4)*3, gao1/5 );
            hua.strokeStyle = "white";
            hua.lineWidth = 2;
            hua.stroke();

            hua.beginPath();
            hua.moveTo( (width1/4), (gao1/5)*4 );
            hua.lineTo( (width1/4)*3, (gao1/5)*4 );
            hua.strokeStyle = "white";
            hua.lineWidth = 2;
            hua.stroke();
        },
        // 指引的显示和消失
        xiaoshi(){
            sessionStorage.setItem('zhiyin',true)
            this.zy = false
        },
        // 指引自动消失
        zidong(){
            this.tim = setTimeout(()=>{
                this.zy = false
                clearTimeout(this.tim)
                this.tim = null
                sessionStorage.setItem('zhiyin',true)
            },5000)
        },
        // 上一页
        shang(){
            if(!this.szmove){
                // 当前为第一页并且不是第一章
                if(this.num == 0 && this.$store.state.bookdetail.nowzj !== 0){
                    // 记录当前应该是上一章
                    let abc = this.$store.state.bookdetail.nowzj - 1
                    this.$store.commit("bookdetail/changebooknowzj",abc);
                    // 记录当前应该是上一章的最后一页
                    let lastnum = Math.ceil(this.$refs.lastxsnr.scrollHeight/this.$refs.zhuti.clientHeight)
                    this.$store.commit("bookdetail/changebooknowys",lastnum);
                    // 让上一页进行移动
                    this.yiwanle_last = false
                    // 记录当前的num
                    this.num = lastnum
                    // 上一页移动到中间
                    this.yidong_last = this.$refs.zhuti.clientWidth
                    console.log("第一页了")
                    this.$store.dispatch("bookdetail/setbooknownr",this.changearr_next);
                    this.tim = setTimeout(()=>{
                        this.xszw = this.changearr_last
                        this.nowgao = this.num * this.$store.state.gao * 0.85
                        this.xzchang = 0
                        clearTimeout(this.tim)
                        this.tim = null
                    },500)
                }else{
                    this.yiwanle_last = false
                    this.num -= 1
                    this.yidong_last = this.$refs.zhuti.clientWidth
                    this.$store.commit("bookdetail/changebooknowys",this.num);
                    // 在移动到某个章节的倒数第二页的时候，把下一个状态的内容换成这个章节的
                    if(this.num == Math.ceil(this.$refs.xsnr.scrollHeight/this.$refs.zhuti.clientHeight) - 1){
                        this.changearr_next = this.xszw
                    }
                }
                this.jindu(this.num)
            }
        },
        // 下一页
        xia(){
           if(!this.szmove){
            //    console.log(Math.ceil(this.$refs.xsnr.scrollHeight/this.$refs.zhuti.clientHeight),this.$refs.xsnr.scrollHeight/this.$refs.zhuti.clientHeight)
                // 当前为最后一页
                if(this.num >= Math.ceil(this.$refs.xsnr.scrollHeight/this.$refs.zhuti.clientHeight)){
                    // console.log(12345)
                    // 记录当前是下一章
                    let abc = this.$store.state.bookdetail.nowzj + 1
                    this.$store.commit("bookdetail/changebooknowzj",abc);
                    // 记录当前是第一页
                    this.$store.commit("bookdetail/changebooknowys",0);
                    // 让下一章进行移动
                    this.yiwanle_next = false
                    // 重新计算这一章的数量
                    this.num = 0
                    // 让下一章移到中间
                    this.yidong_next = this.$refs.zhuti.clientWidth
                    // console.log("最后一页了")
                    this.$store.dispatch("bookdetail/setbooknownr",this.changearr_next);
                    // 让原本的内容晚0.5秒改变
                    this.tim = setTimeout(()=>{
                        this.xszw = this.changearr_next
                        this.nowgao = 0
                        this.xzchang = 0
                        clearTimeout(this.tim)
                        this.tim = null
                    },500)
                }else{
                    this.yiwanle_next = false
                    this.num += 1
                    this.yidong_next = this.$refs.zhuti.clientWidth
                    this.$store.commit("bookdetail/changebooknowys",this.num);
                    // 在移动到某个章节的第二页的时候，把上一个状态的内容换成这个章节的
                    if(this.num == 1){
                        this.changearr_last = this.xszw
                    }
                }
                this.jindu(this.num)
           }
        },
        // 下一章
        xiayizhang(){
            if(!this.szmove){
                // 在最后一页的时候预存下一章的数据
                if(this.num + 1 > Math.ceil(this.$refs.xsnr.scrollHeight/this.$refs.zhuti.clientHeight)){
                    this.getnr(2)
                }
            }
        },
        // 上一章
        shangyizhang(){
            if(!this.szmove){
                // 在不是第一章的某个章节的第一页的时候预存上一章的内容
                if(this.$store.state.bookdetail.nowzj !== 0){
                    if(this.num == 0){
                        this.getnr(1)
                    }
                }else if(this.num < 0 && this.$store.state.bookdetail.nowzj == 0){
                    // 在第一章的第一页的时候不能向上走
                    console.log("第一章不能再上啦！")
                    this.yiwanle_last = true
                    this.yidong_last = 0
                    this.num = 0
                }
            }
        },
        // 目录的显示和消失
        mul(){
            this.xianshimul = true
            this.gbzj()
        },
        mulxiaoshi(event){
            if(event.path.length == 10){
                this.xianshimul = false
            }
        },
        // 点击下一章
        nextzhang(){
            let abc = this.$store.state.bookdetail.nowzj + 1
            this.$store.commit("bookdetail/changebooknowzj",abc);
            this.$store.commit("bookdetail/changebooknowys",0);
            this.num = 0
            this.nowgao = 0
            this.xzchang = 0
            this.getnr(0)
            if(this.$store.state.bookdetail.nowzj !== 0){
                this.getnr(1)
            }
        },
        // 点击上一章
        lastzhang(){
            let abc = this.$store.state.bookdetail.nowzj - 1
            if(abc < 0){
                console.log("已经是第一章了")
            }else{
                this.$store.commit("bookdetail/changebooknowzj",abc);
                this.$store.commit("bookdetail/changebooknowys",0);
                this.num = 0
                this.xzchang = 0
                this.nowgao = 0
                this.getnr(0)
                if(this.$store.state.bookdetail.nowzj !== 0){
                    this.getnr(1)
                }
            }
        },
        // 点击跳转指定章节
        zhiding(num){
            this.$store.commit("bookdetail/changebooknowys",0);
            this.num = 0
            this.nowgao = 0
            this.xzchang = 0
            this.getnr(0)
            this.aaaaa = setTimeout(()=>{
                if(this.$store.state.bookdetail.nowzj !== 0){
                    this.getnr(1)
                }
                clearTimeout(this.aaaaa)
                this.aaaaa = null
            },100)
        },
        // 自动改变进度条
        jindu(num){
            this.kuan = this.$refs.box.offsetWidth * 0.85 * 0.63
            this.xzchang = this.bfb * num
            // console.log(kuan)
        },
        // 点击改变进度条
        dianji(event){
            // console.log(event.touches[0].pageX)
            let duoshao = Math.ceil(this.$refs.xsnr.scrollHeight/this.$refs.zhuti.clientHeight)
            this.xzchang = event.touches[0].pageX - this.$refs.gundongtiao.offsetLeft
            let aaa = Number((this.xzchang * duoshao).toFixed(2))
            // console.log(aaa/this.kuan)
            if(aaa/this.kuan <= 1){
                this.num = 0
                this.nowgao = this.num *this.$store.state.gao * 0.85
            }else{
                this.num = Math.floor(aaa/this.kuan) + 1
                this.nowgao = this.num *this.$store.state.gao * 0.85
            }
            this.$store.commit("bookdetail/changebooknowys",this.num)
        },
        // 开始移动
        ks(event){
            this.start = event.touches[0].pageX;
        },
        // 移动开始
        yd(event){
            this.szmove = true
            this.moving = event.touches[0].pageX
        },
        // 移动结束
        js(){
            if(this.szmove){
                this.szmove = false
                if(this.moving - this.start > 0){
                    // console.log("上一章")
                    this.shang()
                }else if(this.moving - this.start < 0){
                    this.xia()
                    // console.log("下一章")
                }
            }
        },
        // 左右两块移动结束回到初始位置
        yw(){
            this.yiwanle_next = true
            this.yiwanle_last = true
            this.yidong_next = 0
            this.yidong_last = -this.$refs.zhuti.clientWidth
            // console.log("乙烷了")
            this.nowgao = this.num *this.$store.state.gao * 0.85
        },
        // 时间更新
        gbsj(){
            this.timer = setInterval(()=>{
                let data = new Date()
                let shi = data.getHours()
                let fen = data.getMinutes()
                shi = shi<10?'0'+shi:shi
                fen = fen<10?'0'+fen:fen
                this.xzsj = shi + ":" + fen
            },100)
        },
        // 显示目录
        ml(){
            this.mml = true
            this.xianshimul = false
        },
        // 跳往设置
        sz(){

        },
        // 关掉目录
        guandiao(event){
            // console.log(event)
            if(event.path.length == 10){
                this.mml = false
                this.xianshimul = false
            }
        }
    }
}
</script>
<style lang="less">
@import '../other/all.less';
.detailbox{
    
    // transition: all 0.2s linear;
    position: relative;
    width: 100%;
}
.xszz{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height:100%;
    background-color: #00000052;
}
.dinweide{
    width: 100%;
    height:100%;
    position: relative;
}
.dwt{
    width: 100%;
    height:100%;
    position: absolute;
    top: -101%;
    left:0px;
    // background-color: red;
}
.dwtop{
    height:20%;
    width: 100%;
    // background-color: green;
}
.dwzhong{
    height:60%;
    width: 100%;
    // background-color: yellow;
    display:flex;
    text-align: center;
    font-size: 0.5rem;
    .zhongleft{
        width: 25%;
        margin-top: 50%;
        color:white;
    }
    .zhongcenter{
        margin-top: 50%;
        color:white;
        width: 50%;
    }
    .zhongright{
        color:white;
        margin-top: 50%;
        width:25%;
    }
}
.dwdown{
    font-size: 0.4rem;
    height:20%;
    width: 100%;
    .downleft{
        margin-top:20%;
        color:white;
    }
    .downright{
        color:white
    }
}
.xscontent{
    width: 100%;
    height:100%;
    // background-color: red;
    overflow: hidden;
    position: relative;
}
.xszhuti{
    height:100%;
    // width: 90%;
    // margin:0 auto;
    font-size: 0.5rem;
    position: relative;
    .zttop{
        width: 90%;
        margin: 0 auto;
        font-size: 0.4rem;
        padding-top:2%;
        box-sizing: border-box;
        height:5%;
        color:@allcolor1;
        // background-color: yellow;
        text-align: left;
    }
    .ztcenter{
        height: 85.458%;
        overflow: hidden;
        text-align: left;
        margin-top: 5%;
        .xxs{
            width: 90%;
            margin: 0 auto;
        }
        span{
            width: 100% !important;
            height: 1rem !important;
            background-color: white;
            font-size: 0.6rem;
        }
        p{
            margin: 0;
            text-indent: 1rem;
            line-height:0.796rem;
            word-wrap: break-word;
            font-size: 0.45rem;
            word-break: normal;
        }
    }
    .ztdown{
        text-align: left;
        font-size: 0.35rem;
        width: 90%;
        margin: 2% auto 0px;
    }
}
.zzc{
    width: 100%;
    height:100%;
    // background-color: violet;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 100;
}
.zzctop{
    height:20%;
    width: 100%;
    display: flex;
    .shangleft{
        width: 75%;
        // background-color: turquoise;
        height: 100%;
    }
    .shangright{
        width: 25%;
        // background-color: tomato;
        height: 100%;
    }
}
.zzczhong{
    height:60%;
    width: 100%;
    display:flex;
    text-align: center;
    font-size: 0.5rem;
    .centerleft{
        width: 25%;
        // background-color: steelblue;
        height: 100%;
    }
    .centercenter{
        width: 50%;
        // background-color: seagreen;
        height: 100%;
    }
    .centerright{
        width:25%;
        height: 100%;
        // background-color: rgb(194, 174, 165);
    }
}
.zzcdown{
    font-size: 0.4rem;
    height:20%;
    width: 100%;
    display:flex;
    .xialeft{
        // background-color: rosybrown;
        width: 25%;
        height: 100%;
    }
    .xiaright{
        // background-color: navy;
        width: 75%;
        height: 100%;
    }
}
.biaoti{
    color: @allcolor2;
    text-indent: 0px !important;
    font-size: 0.6rem !important;
    // padding-top: 15px;
    // padding-bottom: 10px;
}
.last{
    width: 100%;
    position: absolute;
    top: 5%;
    left:-100%;
    background-color: white;
    z-index:10;
}
.now{
    // background-color: navy;
}
.next{
    position: absolute;
    width: 100%;
    top: 5%;
    right:-100%;
    background-color: #fff;
    // background-color: rgb(151, 190, 190);
}
.mlboxtop{
    position: relative;
    width: 100%;
    height:100%;
}
.mlbox{
    // background-color: yellow;
    z-index:10001;
    position: absolute;
    width: 100%;
    height:100%;
    top:-100%;
    left:0px;
}
.mldown{
    height:120px;
    width: 100%;
    background-color: white;
    border-top:1px solid @allcolor3;
    position: fixed;
    bottom: 0px;
    font-size: 0.5rem;
}
.dangqian{
    font-size: 0.45rem;
    color:@allcolor2;
    margin-top:10px;
}
.changetop{
    display:flex;
    justify-content: space-between;
    width: 85%;
    margin:10px auto;
    height:20px;
    overflow: hidden;
    .changeleft{
        width: 15%;
        font-size:0.7rem;
        color:@allcolor2;
        margin-top:-6px;
    }
    .changecenter{
        width: 63%;
        height:5px;
        background-color: @allcolor3;
        margin-top:2.8%;
        position: relative;
        .changechang{
            position: absolute;
            top: 0px;
            left:0px;
            // width: 100px;
            height:5px;
            background-color: @allcolor2;
        }
    }
    .changeright{
        width: 15%;
        font-size:0.7rem;
        margin-top:-7px;
        color:@allcolor2;
    }
}
.changedown{
    margin-top:5%;
    display:flex;
    justify-content: space-around;
    .smallchange{
        color:@allcolor1;
        svg{
            color:@allcolor1;
            font-size:0.5rem;
        }
    }
}
.bigml{
    position: absolute;
    width: 100%;
    height:100%;
    top:-100%;
    left:0px;
    background-color: rgba(0, 0, 0, 0.6);
    .left{
        width: 75%;
        height:100%;
        background-color: white;
    }
}
</style>